// 传入视频资源路径，返回一个videoWrapperDOM
function createVideo({
    videoUrl,
    width,
    height,
    dragSvg = ""
}) {
    const videoWrapperDOM = initWrapperDOM(width, height);

    const video = document.createElement('video');
    video.classList.add("own-video")
    video.src = videoUrl;

    videoWrapperDOM.appendChild(video);


    function initWrapperDOM(width, height) { // 初始化外层DOM
        const videoWrapperDOM = document.createElement("div");
        videoWrapperDOM.classList.add("own-video-wrapper")
        videoWrapperDOM.style.width = width + "px";
        videoWrapperDOM.style.height = height + "px";
        return videoWrapperDOM;
    }

    let timeFrameId = null; // 播放时间展示动画

    const videoControl = {
        paused: true,//那个video自带的那个还不是好用
        videoDOM: null,
        play(playBtn) {
            this.videoDOM.play();
            updateTime();
            playBtn.classList.remove("pause");
            playBtn.classList.add("play");
            this.paused = false;
        },
        pause(playBtn) {
            this.videoDOM.pause();
            cancelAnimationFrame(timeFrameId);
            playBtn.classList.remove("play");
            playBtn.classList.add("pause");
            this.paused = true;
        },
        setVolume(v) {
            v = v < 0 ? 0 : v;
            this.videoDOM.volume = v;
        },
        w: 960, // 最开始播放器的大小
        h: 540,
        setVideoDOM(video, w, h) {
            // 看似很奇怪
            // 这个应该分一个模块，然后私有化，对外暴露方法，但作为练习我就没那么做了
            this.videoDOM = video;
            this.w = w;
            this.h = h;
            this.setVolume(.5);
        },
        setFullScreen(isFullScreen) {
            if (isFullScreen) {
                this.videoDOM.parentNode.classList.add("video-full-screen");
            } else {
                this.videoDOM.parentNode.classList.remove("video-full-screen");
            }
        }
    }
    videoControl.setVideoDOM(video, width, height);

    let playBtn = document.createElement("div");
    function createPlayBtn(video) {
        // 播放按钮
        playBtn.classList.add("btn", "play-btn", "pause");
        playBtn.addEventListener("click", function () {
            if (videoControl.paused) {
                // 视频状态暂停播放
                console.log("paused");
                videoControl.play(this);
            } else {
                console.log("play");
                videoControl.pause(this);
            }

        })
        return playBtn;
    }

    const current = document.createElement("span"); // 当前播放时间
    const total = document.createElement("span"); // 总时间
    function updateTime() {
        const totalTime = parseTime(video.duration);
        const currentTime = parseTime(video.currentTime);
        current.innerText = currentTime;
        total.innerText = totalTime;

        timeFrameId = requestAnimationFrame(updateTime);
    }
    function createTimeDisplay(video) {
        // 01:00 / 5:20
        const timeDisplayWrapper = document.createElement("div");
        timeDisplayWrapper.classList.add("time-wrapper")

        timeDisplayWrapper.appendChild(current);
        timeDisplayWrapper.appendChild(total);


        video.addEventListener("canplaythrough", function () {
            // 视频加载完成更新最新的播放时间
            const totalTime = parseTime(video.duration);
            const currentTime = parseTime(video.currentTime);
            current.innerText = currentTime;
            total.innerText = totalTime;
        })


        return timeDisplayWrapper

    }


    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
    function createFullScreen() {
        const fullScreenWrapper = document.createElement("div");
        fullScreenWrapper.classList.add("full-screen-wrapper");
        const arr = ["全屏", "小屏"];
        fullScreenWrapper.innerText = arr[0];
        let status = "normal"; // 浏览器的一个状态 full normal
        document.addEventListener("fullscreenchange", function () {
            console.log(document.fullscreenElement);
            if (document.fullscreenElement !== null) {
                // 进入全屏模式
                status = "full";
            } else {
                status = 'normal';
                exitFullscreen();
                videoControl.setFullScreen(false);
                fullScreenWrapper.innerText = arr[0];
            }
        });
        fullScreenWrapper.addEventListener("click", function () {
            if (status === 'normal') {
                document.documentElement.requestFullscreen();
                videoControl.setFullScreen(true);
                this.innerText = arr[1];
            }
            if (status === 'full') {
                exitFullscreen();
                videoControl.setFullScreen(false);
                this.innerText = arr[0];
            }

        })

        return fullScreenWrapper;
    }

    function createVolumeWrapper(video) {
        const volumeWrapper = document.createElement('div');
        const volumeIco = document.createElement("div");
        const volumeBarWrapper = document.createElement('div');
        volumeWrapper.classList.add("volume-wrapper");
        volumeIco.classList.add("volume-ico");
        volumeBarWrapper.classList.add("volume-bar-wrapper");

        const bgBar = document.createElement("div");
        bgBar.classList.add("volume-bg-bar");
        const innerBar = document.createElement("div");
        innerBar.classList.add("volume-inner-bar");
        const circle = document.createElement("span");
        circle.classList.add("volume-circle");


        volumeBarWrapper.appendChild(bgBar);
        bgBar.appendChild(innerBar);
        bgBar.appendChild(circle);
        volumeWrapper.appendChild(volumeIco);
        volumeWrapper.appendChild(volumeBarWrapper);


        let clicked = false;
        let clientY, clickY;
        let barHeight = 0;
        circle.addEventListener("mousedown", function (e) {
            barHeight = bgBar.clientHeight; // 最大拖拽范围
            // 在父元素display:none，尺寸不准确
            clicked = true; // 代表可以进行拖拽了
            clickY = e.pageY
            clientY = innerBar.clientHeight;
        })
        volumeWrapper.addEventListener("mousemove", function (e) {
            if (!clicked) {
                return; // 点击之后才能进行拖拽
            }
            const moveY = clickY - e.pageY; // 这条公式要注意一下
            // 因为这个相比进度条拖拽它就是一个单向动画，只需要计算出当前的音量大小就好了
            let h = clientY + moveY;
            h = h < 0 ? 0 : h; // 边界处理
            h = h > barHeight ? barHeight : h;
            innerBar.style.height = h + "px";
            circle.style.bottom = h + "px";
            const v = h / barHeight; // 音量 
            // 为了可阅读性，我尽量没有都挤在一行写，这是一个人的职业素养
            videoControl.setVolume(v);

        })
        const stopDragVolumeBar = function () {
            if (clicked) {
                // 正在拖拽
                clicked = false; // 取消拖拽状态
            }
        }
        document.addEventListener("mouseup", stopDragVolumeBar)
        volumeWrapper.addEventListener("mouseleave", stopDragVolumeBar);


        return volumeWrapper;
    }



    function createDragBar(video, dragSvg) {
        // 播放进度条
        const barWrapper = document.createElement("div");
        barWrapper.classList.add("bar-wrapper");
        const innerBar = document.createElement("div");
        innerBar.classList.add("inner-bar");
        barWrapper.appendChild(innerBar);
        const circle = document.createElement("span");
        circle.classList.add("circle");
        if (dragSvg) {
            // 自定义svg拖拽图标
            circle.innerHTML = dragSvg;
            circle.classList.add("svg-circle")
        } else {
            circle.classList.add("normal");
        }

        window.circle = circle;
        barWrapper.appendChild(circle);
        let frameId = null; // 拖拽的时候需要取消动画


        // 拖拽功能
        // 我需要知道总的进度条的长度
        // 还需要知道拖动的距离
        // 拖动的距离 / 总的进度条长度 = currentTime / totalTime

        let totalWidth = 0;
        let totalTime = 0;
        video.addEventListener("canplaythrough", function () {
            // 视频资源加载完成
            totalTime = this.duration;
            let clicked = false;
            let clientX, clickX;
            circle.addEventListener("mousedown", function (e) {
                // 如果获取元素属性为最开始，那么全屏缩放会出现BUG
                totalWidth = barWrapper.offsetWidth; // 为了适应元素的最新大小
                // 暂停播放
                // 点击时记住点击瞬间的位置
                cancelAnimationFrame(frameId); // 取消播放动画 优化性能减少不必要的麻烦
                // 不然你操控不了元素
                videoControl.pause(playBtn);
                clientX = this.offsetLeft;
                clickX = e.pageX;
                clicked = true; // 进入拖拽状态

            })
            document.addEventListener("mousemove", function (e) {
                if (!clicked) {
                    return; // 非拖拽状态
                }
                cancelAnimationFrame(frameId);
                let moveX = e.pageX - clickX;
                let per = (clientX + moveX) / totalWidth;
                per = per < 0 ? 0 : per; // 做边界处理
                per = per > 1 ? 1 : per;
                per = per * 100 + "%";
                circle.style.left = per;
                innerBar.style.width = per;
            })
            document.addEventListener("mouseup", function (e) {
                if (clicked) {
                    clicked = false;
                    let moveX = e.pageX - clickX;
                    let per = (clientX + moveX) / totalWidth;
                    video.currentTime = getCurrentTime(video, per);
                    per = per > 1 ? 1 : per;
                    per = per < 0 ? 0 : per;
                    per = per * 100 + "%";
                    circle.style.left = per;
                    innerBar.style.width = per;
                    videoControl.play(playBtn);
                    barAnimate();
                }

            })
        })


        function barAnimate() {
            const per = getPercentage(video) * 100 + "%";

            circle.style.left = per;
            innerBar.style.width = per;
            frameId = requestAnimationFrame(barAnimate);
        }
        barAnimate();

        return barWrapper;
    }



    function createPlayRate(video) {
        // 倍速播放
        const rateWrapper = document.createElement("div");
        rateWrapper.classList.add("rate-wrapper");
        const currentRateWrapper = document.createElement('div');

        currentRateWrapper.innerText = "1X";
        const ul = document.createElement("ul");
        ul.classList.add("rateSelectorWrapper");
        ul.innerHTML = `
            <li>2X</li>
            <li>1.5X</li>
            <li>1X</li>
            <li>.5X</li>    
        `
        ul.addEventListener("click", function (e) {
            if (e.target.tagName === "LI") {
                currentRateWrapper.innerText = e.target.innerText;
                const rate = parseFloat(e.target.innerText);
                video.playbackRate = rate;
            }
        })
        rateWrapper.appendChild(currentRateWrapper);
        rateWrapper.appendChild(ul);
        return rateWrapper;

    }

    function initBar() {
        const bar = document.createElement("div");
        bar.classList.add("own-video-control-bar");
        return bar;
    }


    const bar = initBar();
    const timeDisplayWrapper = createTimeDisplay(video);
    const dragBar = createDragBar(video, dragSvg);
    const rateWrapper = createPlayRate(video);

    // 为了将右边的按钮聚起来而已，我觉得那样会更好看
    const container = document.createElement("div");
    container.classList.add("video-btn-container");
    container.appendChild(rateWrapper);
    container.appendChild(createVolumeWrapper(video));
    container.appendChild(createFullScreen());


    bar.appendChild(createPlayBtn(video));
    bar.appendChild(timeDisplayWrapper);
    bar.appendChild(dragBar);
    bar.appendChild(container);
    
    videoWrapperDOM.appendChild(bar);

    return videoWrapperDOM;
}